<template>
	<div class="email">
		<transition name="mybox2">
		<div class="left" v-show="cebian_show">
			<div class="topNav"><i class="el-icon-document"></i><p>&nbsp;邮件</p></div>
			
			<div class="bottomNav">
				<button class="btn el-icon-plus add_email">新建</button>
				<ul>
					<li><p class="el-icon-star-off">星标邮件</p><el-badge class="mark" :value="12" /></li>
					<li><p class="el-icon-edit">红旗邮件</p><el-badge class="mark" :value="99" /></li>
					<li><p class="el-icon-upload2">发件箱</p><el-badge class="mark" :value="54" /></li>
					<li><p class="el-icon-edit-outline">草稿箱</p><el-badge class="mark" :value="44" /></li>
					<li><p class="el-icon-delete">已删除</p><el-badge class="mark" :value="64" /></li>
				</ul>
			</div>
			
			<!-- Form -->
			<div id="form" style="display: none;">
			  	<el-form :model="form">
			    	<el-form-item label="主题" :label-width="formLabelWidth">
			      		<el-input v-model="form.name" placeholder="请输入主题" auto-complete="off" :label-width="formLabelWidth"></el-input>
			    	</el-form-item>
				    <el-form-item label="主送" :label-width="formLabelWidth">
				    	<el-input v-model="form.zhusong" placeholder="请输入主送" auto-complete="off" :label-width="formLabelWidth"></el-input>
				    </el-form-item>
				    <el-form-item label="抄送" :label-width="formLabelWidth">
				    	<el-input v-model="form.chaosong" placeholder="请输入抄送" auto-complete="off" :label-width="formLabelWidth"></el-input>
				    </el-form-item>
				    <el-form-item label="内容" :label-width="formLabelWidth">
				    	<!--富文本编辑器-->
				    	<div id="div1">
			        				
			    		</div>
					</el-form-item>
			  	</el-form>
			  	<div slot="footer" class="dialog-footer">
			    	<el-button @click="dialogFormVisible = false">取 消</el-button>
			    	<el-button type="primary" @click="queding_from">确 定</el-button>
			  	</div>
			</div>
			
			
			<div class="zuixia">
				<button class="btn" @click="togglebox">我的文件夹<i class="el-icon-caret-top"></i></button>
				<!--折叠div动画-->
				<transition name="mybox">
			        <ul class="box"  v-show="boxshow">
			        	<li>OA</li>
			        	<li>WEB</li>
			        	<li>备份邮件</li>
			        	<li>其他</li>
			        </ul>
			    </transition>
			</div>
			
			<div class="zuixia2">
				<p>已用空间：</p>
				<el-progress :text-inside="true" :stroke-width="18" :percentage="70" status="success"></el-progress>
			</div>
			
		</div>
		</transition>
		
		<!--中间的线-->
		<div class="line_div"></div>
		
		<div class="right">  <!--:style="{width: widthData}"-->
			<div class="topNav"><i class="el-icon-news"></i><p>&nbsp;邮件</p></div>
			
			<div class="rigth_bottom">
				<!--头部按钮部分-->
				<div class="btn">
					<div class="dd1">
						<el-button type="primary" icon="el-icon-plus">添加</el-button>
						<el-button type="primary" icon="el-icon-delete">删除</el-button>
						<el-button type="primary" icon="el-icon-goods">锁定</el-button>
						<el-dropdown>
							<el-button type="primary">
							    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown">
							    <el-dropdown-item><i class="el-icon-delete"></i>&nbsp;注销</el-dropdown-item>
							    <el-dropdown-item><i class="el-icon-view"></i>&nbsp;查看</el-dropdown-item>
							    <el-dropdown-item><i class="el-icon-success"></i>&nbsp;授权</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
					
					<div class="dd2">
						<el-input  placeholder="请输入内容" suffix-icon="el-icon-date" class="dd2_1" v-model="input1"></el-input>
						<el-button type="primary" icon="el-icon-search" @click="layui_sousuo">搜索</el-button>
						
						<el-popover
						  placement="bottom"
						  width="250"
						  height='500'
						  v-model="visible2"
						  trigger="click">
						  <ul>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">文章标题</p><el-input v-model="input" placeholder="输入文章标题" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">发布状态</p><el-input v-model="input" placeholder="输入发布状态" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right: 10px;">文章标签</p><el-input v-model="input" placeholder="输入文章标签" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;"><p style="white-space: nowrap;line-height: 30px;margin-right:40px;">作者</p><el-input v-model="input" placeholder="输入作者" suffix-icon="el-icon-date"></el-input></li>
						    <li style="display: flex;margin-bottom: 10px;justify-content: space-around;">
						    	<el-button type="primary" size="mini" icon="el-icon-plus" data-type="reload">搜索</el-button>
								<el-button type="primary" size="mini" icon="el-icon-delete">重置</el-button>
								<el-button type="primary" size="mini" icon="el-icon-goods" @click="visible2 = false">取消</el-button>
						    </li>
						  </ul>
						  <el-button type="primary" slot="reference">高级搜索<i class="el-icon-arrow-down el-icon--right"></i></el-button>
						</el-popover>
						
					</div>
				</div>
				<!--数据表格部分-->
				<div class="table">
					<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
					<i class="layui-icon-home"></i>
				</div>
			</div>
			
			<!--收缩侧边栏按钮-->
			<div class="shousuo" @click="guanbi"><i class="el-icon-caret-left"></i></div>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'email',
		data(){
			return{
				boxshow:true,//控制div的展开和收起
				cebian_show:true,//控制侧边栏展开和收起
				visible2:false,//控制高级搜索显示和隐藏
				formLabelWidth: '80px',//控制新建邮件的弹出层输入框宽度
				input:'',
				input1:'',//搜索的输入框
		        //新建邮箱的提交数据
		        form: {
		          name: '',
		          zhusong: '',
		          chaosong:'',
		          fuwenben:'',
		        },
			}
		},
		mounted(){
			this.layui()
		},
		methods:{
			layui(){
				layui.use('table', function(){
				  	var table = layui.table;
				  
				  	//第一个实例
				  	table.render({
					    elem: '#LAY_table_user'
					    ,id: 'testReload'
					    ,url: '../../../../../static/json/table.json' //数据接口
					    ,page: true //开启分页
					    ,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
					    ,cols: [[ //表头
					      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
					      ,{field: 'username', title: '用户名', width:80}
					      ,{field: 'sex', title: '性别', width:80, sort: true}
					      ,{field: 'city', title: '城市', width:80} 
					      ,{field: 'sign', title: '签名', width: 177}
					      ,{field: 'experience', title: '积分', width: 80, sort: true}
					      ,{field: 'score', title: '评分', width: 80, sort: true}
					      ,{field: 'classify', title: '职业', width: 80}
					      ,{field: 'wealth', title: '财富', width: 135, sort: true}
					    ]]
					});
					  
					//触发新建邮箱事件
  					var $ = layui.jquery, layer = layui.layer;
					$('.add_email').on('click', function(){
						layer.open({
				          type: 1
				          ,title: '新建邮件'
				          ,content: $('#form')
				          ,maxmin: true
				          ,area: ['900px', '620px']
				          ,yes: function(index, layero){
				            //点击确认触发 iframe 内容中的按钮提交
				            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
				            submit.click();
				          }
				        });
					});
					
					/*创建富文本编辑器*/
				  	var E = window.wangEditor;
				    var editor = new E('#div1');
				    editor.create();
					
					/* 监听提交 */
				    form.on('submit(component-form-demo1)', function(data){
				      parent.layer.alert(JSON.stringify(data.field), {
				        title: '最终的提交信息'
				      })
				      return false;
				    });
					/* 自定义验证规则 */
				    form.verify({
				      title: function(value){
				        if(value.length < 5){
				          return '标题至少得5个字符啊';
				        }
				      }
				      ,pass: [/(.+){6,12}$/, '密码必须6到12位']
				      ,content: function(value){
				        layedit.sync(editIndex);
				      }
				    });
					
					
				});
			},
			//点击搜索
			layui_sousuo(){
				let table = layui.table;
				let input1 = this.input1
				
			    //执行重载
			    table.reload('testReload', {//testReload你要重新渲染哪个表格
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {
			            id: input1,
			        }
			    });
				
			},
			handleOpen(key, keyPath) {
		        console.log(key, keyPath);
		    },
		    handleClose(key, keyPath) {
		        console.log(key, keyPath);
		    },
		    //控制div展开和收缩
		    togglebox(){
                this.boxshow = !this.boxshow;
           	},
		    
		    //点击新建邮箱弹出层的确定
		    queding_from(){
		    	console.log(this.form)
		    },
		    //富文本编辑器
		    onEditorBlur(res){//失去焦点事件
		    	
            },
            onEditorFocus(res){//获得焦点事件
            	
            },
            onEditorChange(res){//内容改变事件
            	
            },
		    //点击关闭侧边栏按钮
		    guanbi(){
		    	this.cebian_show=!this.cebian_show
		    }
		},
	}
</script>

<style scoped="scoped" lang="scss">
	.email{
		width: 98%;height: 100%;padding: 10px;background: #f2f2f2;display: flex;min-width: 1000px;
		.left{
			background: white;width: 220px;height: 100%;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-document{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			.bottomNav{
				width: 100%;
				.btn{width: 100%;background: #409EFF;text-align: center;height: 40px;line-height: 40px;border-radius: 4px;color: white;cursor: pointer;}
				ul{
					border: 1px solid #ddd;margin-top: 10px;cursor: pointer;
					li{
						display: flex;justify-content: space-between;width: 100%;padding: 10px;box-sizing: border-box;font-size: 14px;
						p{line-height: 22px;}
					}
					li:hover{background: #409EFF;color: white;}
				}
			}
			#form{
				padding: 10px;
			}
			.zuixia{
				.btn{width: 100%;background: #409EFF;text-align: center;height: 40px;line-height: 40px;border-radius: 4px;color: white;cursor: pointer;margin-top: 10px;}
			}
			.zuixia2{
				margin-top:20px;
				p{font-size: 14px;text-align: left;margin-bottom: 10px;}
			}
		}
		
		/*中间的线div*/
		.line_div{border-left:1px solid #ddd ;width: 1px;height: 100%;margin:0 5px;}
		
		.right{
			background:white;width: 82%;
			.topNav{
				display: flex;height: 40px;background: #f2f2f2;
				.el-icon-news{font-size: 20px;background: #4b9a23;border-radius: 5px;color: white;width: 30px;height: 30px;margin-top: 5px;line-height: 30px;}
				p{line-height: 40px;}
			}
			.rigth_bottom{
				margin: 10px;
				.btn{
					display: flex;justify-content: space-between;
					.dd2{
						display: flex;
						.dd2_1{margin-right: 5px;}
					}
				}
				.table{margin-top: 20px;}
			}
			.shousuo{
				position: absolute;bottom: 10%;width: 25px;height: 50px;background: #ddd;line-height: 50px;text-align: center;cursor: pointer;color: white;
			}
			.shousuo:hover{background: #409EFF;}
		}
	}
	
	
	/*控制div的展开和收缩样式*/
	.box{
        height: 180px;overflow: hidden;border: 1px solid #ddd;
        li{display: flex;justify-content: space-between;width: 100%;padding:0 10px;box-sizing: border-box;font-size: 14px;height: 40px;line-height: 40px;}
        li:hover{background: #409EFF;color: white;}                       
    }
    .mybox-leave-active,.mybox-enter-active{
        transition:  all 1s ease; 
    }
    .mybox-leave-active,.mybox-enter{
        height:0px !important;
    }
    .mybox-leave,.mybox-enter-active{
        height: 180px;
        
    }
    /*控制侧边栏展开和收缩动画*/
    .mybox2-leave-active,.mybox2-enter-active{
        transition:  all 1s ease; 
    }
    .mybox2-leave-active,.mybox2-enter{
        width: 0!important;
    }
    .mybox2-leave,.mybox2-enter-active{
        width: 220px;
    }
</style>